<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/background/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/background/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/background/css/xadmin.css">
    <script src="${pageContext.request.contextPath}/background/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/background/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/background/js/xadmin.js"></script>
</head>
<body>
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加动物类别',
                'addAnimalTypeBg?t=${t}')"><i class="layui-icon"></i>添加</button>
    </xblock>


    <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
        <ul class="layui-row layui-col-space10 layui-this">
            <c:forEach items="${allAnimalType}" var="animalType" varStatus="row">
                <li class="layui-col-xs4">
                    <a href="findAnimalByTypeIdBg?typeId=${animalType.tyId}&tyParentId=${animalType.tyParentId}" class="x-admin-backlog-body">
                        <h1>${animalType.tyName}</h1>
                        <p>
                            <cite>ID:${animalType.tyId}</cite>
                        </p>
                    </a>
                    <a title="删除" onclick="member_del(this,'${animalType.tyId}',${animalType.tyParentId})" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </li>
            </c:forEach>
        </ul>
    </div>

    <script type="text/javascript">
        /*用户-删除*/
        function member_del(obj,ty_id,tyParentId){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $.ajax({
                    url:"deleteAnimalType",
                    data:{"ty_id":ty_id,"tyParentId":tyParentId},//servlet按照"classobj_id"取值
                    type:"POST",
                    success:function(data){//从servlet获取返回数据data:{SUCCESS ERREO}
                        if(data=="SUCCESS"){//如果数据库返回说明删除成功
                            $(obj).parents("li").remove();//无需重新访问数据库，从页面直接删除组件
                            layer.msg('已删除!',{icon:1,time:1000});
                        }else{
                            layer.alert(data,{title:"删除失败"});
                        }
                    }
                });
            });
        }
    </script>
</body>
</html>
